<template>
  <div>
    <div class="option">
      <el-form :inline="true" ref="option" :model="options">
        <el-form-item label="路段名称">
          <el-input placeholder="请输入路段名称" v-model="options.groupValue" @keyup.enter.native="query" clearable
                    size="mini"></el-input>
        </el-form-item>
        <el-form-item label="路段类型">
          <el-select v-model="options.groupType" placeholder="请选择路段类型" size="mini" clearable
                     @keyup.enter.native="query">
            <el-option
              v-for="item in allRoad"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择时间">
          <el-date-picker
            @change="selectTimeRange"
            @keyup.enter.native="query"
            v-model="dataRange"
            type="daterange"
            size="mini"
            format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="query">
            <i class="el-icon-search"></i> 查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="padding: 0 15px;">
      <el-table
        :data="tableData"
        border
        @row-click="rowClick"
        stripe
        :height="tableHeight"
        :default-sort="{prop: 'count', order: 'descending'}"
        style="width: 100%">
        <el-table-column
          prop="index"
          label="序号"
          align="center"
          width="60">
          <template slot-scope="scope">
            {{scope.$index+1}}
          </template>
        </el-table-column>
        <el-table-column
          prop="road"
          label="路段名称"
          align="center"
          width="120">
        </el-table-column>
        <el-table-column
          prop="roadName"
          align="center"
          label="路段类型">
        </el-table-column>
        <el-table-column
          v-for="item in cols"
          sortable
          align="center"
          :key="item.code"
          :prop="item.code"
          :label="item.label">
          <template slot-scope="scope">
            <span v-html="num(scope.row[item.code],scope.row['max'])"></span>
          </template>
        </el-table-column>
        <el-table-column
          prop="count"
          sortable
          align="center"
          label="事件总数">
          <template slot-scope="scope">
            {{num(scope.row.count)}}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div id="drawer" v-if="showDrawer">
      <h5><span class="name" v-html="roadName"></span>事件统计
        <span class="close el-icon-close" @click="showDrawer=0"></span>
      </h5>
      <div class="top">
        <VBarChart :data="barData" :cfg="vBarChartCfg"></VBarChart>
      </div>
      <div class="bottom">
        <PieChart :data="pieData" :cfg="pieChartCfg"></PieChart>
      </div>
    </div>

  </div>
</template>

<script>
  import moment from 'moment';

  import VBarChart from 'kkui/echarts/VBarChart';
  import PieChart from 'kkui/echarts/PieChart4';

  export default {
    name: "Road",
    components: {
      VBarChart,
      PieChart
    },
    data() {
      return {
        tableHeight: document.documentElement.clientHeight - 60 - 46 - 62 - 5,
        allRoad: [],
        dataRange: '',
        options: {
          startTime: '',
          endTime: '',
          groupType: '',
          groupValue: ''
        },
        tableData: [],
        cols: [],
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now() || time.getTime() <= new Date('2023-05-01 00:00:00').getTime();
          }
        },
        roadName: '',
        showDrawer: 0,
        vBarChartCfg: {
          barWidth: 50,
          axisColor: '#333',
          fontWeight: 400,
          rotate: 1
        },
        barData: {},
        pieChartCfg: {
          right: 50,
          center: ['50%', '50%'],
          radius: ['40%', '70%'],
          bigFontSize: 16,
          smallFontSize: 14,
          unit: '次'
        },
        pieData: []
      }
    },
    mounted() {
      this.init();
    },
    computed: {
      num: function () {
        return (num, max) => {
          if (max) {
            return max === num ? `<strong style="color:red">${num}</strong>` : (num === 0 ? '' : num)
          }
          return num === 0 ? '' : num
        }
      }
    },
    methods: {
      init() {
        this.$server('count.allRoad').then(data => {
          this.allRoad = [];
          const dict = this.$kkui.cache.get('dict')['cameraGroup'];
          for (let key in data) {
            const v = Object.values(dict);
            this.allRoad.push({
              name: key,
              code: Object.keys(dict)[v.indexOf(key)]
            })
          }
          this.query();
        });

      },
      selectTimeRange() {
        if (this.dataRange) {
          this.options.startTime = this.dataRange ? moment(this.dataRange[0]).format('YYYY-MM-DD') : '';
          this.options.endTime = this.dataRange ? moment(this.dataRange[1]).format('YYYY-MM-DD') : '';
        } else {
          this.options.startTime = '';
          this.options.endTime = '';
        }
      },

      query() {
        const param = {...this.options};
        if (!param.startTime) param.startTime = '2023-05-01';

        this.$server('count.queryRoad', param).then(data => {
          this.cols = data[0].list.map(item => {
            return {
              label: item.name,
              code: item.code
            }
          });
          this.tableData = data.map(item => {
            const temp = {...item};
            item.list.forEach(itm => {
              temp[itm.code] = itm.value;
            });
            temp.max = Math.max(...temp.list.map(item => item.value));
            return temp
          });


        })

      },
      rowClick(row) {
        this.roadName = row.road ? '<span>[ ' + row.roadName + ' / ' + row.road + ' ]</span>' : '<span>' + row.roadName + '</span>';
        this.barData = {
          name: row.list.map(item => item.name),
          value: row.list.map(item => item.value)
        };
        this.pieData = row.list.map(item => {
          return {
            ...item,
            itemStyle: {color: WebCfg.eventColor[item.code]}
          }
        });
        this.showDrawer = 1;
      }

    }
  }
</script>

<style scoped lang="scss">
  #drawer {
    position: fixed;
    top: 60px;
    right: 0;
    bottom: 0;
    width: 40vw;
    background-color: #fff;
    z-index: 1;
    border-left: 1px solid #999;
    display: flex;
    flex-direction: column;


    h5 {
      font-size: 16px;
      height: 50px;
      line-height: 50px;
      background-color: #f0f0f0;
      padding-left: 15px;

      span.name {
        color: #069;
        margin-right: 10px;
      }

      span.close {
        position: absolute;
        right: 20px;
        line-height: 50px;
        font-size: 20px;
        opacity: .8;
        cursor: pointer;

        &:hover {
          opacity: 1;
        }
      }
    }

    .top {
      border-bottom: 1px solid #ccc;
      height: 50%;
      padding: 15px;
      box-sizing: border-box;
    }

    .bottom {
      height: 50%;
    }
  }

  /deep/ tbody {
    td {
      cursor: pointer
    }
  }

</style>
